Vue笔记（一）——Vue指令&模板

前言

用于记录个人学习vue笔记

Vue-MVVM模式

• M: model,称之为数据模型，在前端为对象的形式表现

let data = {msg:'我就是一个数据模型'}

• V：View，视图，也就是HTML

<div id="app">
    <span>我是视图</span>
</div>

• VM: ViewModel,就是连接数据和视图的桥梁，当Model发送改变时，ViewModel便将数据映射到视图。

数据驱动模式和MVVM的关系：MVVM是数据驱动模式的一种实现，Vue是MVVM的一种实现

模板语法

模块语法已成为前端在数据驱动模式上View层最好的实现

插值

• 使用{{}}来绑定数据
• {{}}--可以进行js表达式的运算

<div id="app">
    <!-- {{name}}值为fhj -->
    <h1>{{name}}</h1>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        name:'fhj'
    }
});

指令缩写

• v-bind

<!-- 完整写法 -->
<img v-bind:src="..."></img>
<!-- 缩写 -->
<img :src=".."></img>

• v-on

<!-- 完整写法 -->
<button v-on:click="btn"></button>
<!-- 缩写 -->
<button @click="btn"></button>

指令

指令（directive），即原生的自定义属性，在vue中是以 v- 为前缀的自定义属性

• v-text

<span v-text="msg"></span>
<!-- 效果等同于 {{msg}} -->
<!-- v-text的权重高于{{}} -->

• v-html

<div v-html="addHtml"></div>
let vm = new Vue({
    data:{
        addHtml:'<a>fhj</a>'
    }
});

• v-show

<!-- isshow的值会直接影响 div 在视图中是否显示，即 block 或 none -->
<div v-show="isshow"></div>

• v-if

<!-- status的值会直接影响 div 在视图中是否存在 -->
<div v-if="status"></div>

• v-else-if
• v-else
• v-for

<!--
    data = 3 || [] || string || {}
    div 会循环data.length 次
    value 的值为变量的值
    index 的值为下标||对象||属性名
-->
<div v-for="(value,index) in data">
    <span>{{value}}</span>
    <span>{{index}}</span>    
</div>

• v-model

<!-- 仅限于表单元素，双向绑定 -->
<input type="text" v-model = "msg"/>

• v-pre

<!-- 指定某个vue指令不编译，当字符串输出 -->
<span v-pre>{{msg}}</span> // {{msg}}

• v-once

<!-- 内容只解释一次，当改变mess时不会再次映射到 span -->
<span v-once>{{msg}}</span>